<template>
	<view class="page-all">
		<Header title="检查通知" bgColor="#fff" :leftIconSize="20"></Header>
		<view class="notification-mian">
			<view class="top-bar">
				<view class="msg-num" :class="{actived:tabValue==0}" @click="tabValue=0">全部<text>+99</text></view>
				<view class="msg-num" :class="{actived:tabValue==1}" @click="tabValue=1">未读</view>
				<view class="msg-num" :class="{actived:tabValue==2}" @click="tabValue=2">已读</view>
				<view class="check-date" @click="showCalendar">检查日期</view>
			</view>
			<view class="data-list" v-for="(item,index) in listData" :key="index">
				<view class="title-clum">
					<view class="title"><image class="icon" src="@/static/image/dailycheck/icon-notice.png" mode="heightFix"></image>{{item.title}}</view>
					<view class="date">{{item.createDate}}</view>
				</view>
				<view class="content">
					
					<view class="name">
						{{item.content}}
						<view class="reminder" v-if="!item.isRead"></view>
					</view>
					<view class="data">
						{{item.starDate}}~{{item.endDate}}
						<view class="unit-name">{{item.unit}}</view>
					</view>
				</view>
				<view class="details-text" @click.stop="openDetails">查看详情<uv-icon name="arrow-right" color="#606266" size="14"></uv-icon></view>
			</view>
		</view>
		<!--<uv-calendar ref="calendar" mode="range"  @confirm="dateConfirm"></uv-calendar>-->
		<!--详情弹出-->
		<uv-modal ref="detailsModal" title="通知详情" @confirm="confirm" confirmText="知道了">
			<view class="slot-content">
				<rich-text :nodes="content"></rich-text>
			</view>
		</uv-modal>
	</view>
</template>

<script setup>
	import { reactive } from 'vue';
	import { ref } from 'vue'

	const tabValue=ref(0)
	
	//选择检查日期
	const calendar = ref()
	function showCalendar(){
		calendar.value.open()
	}
	function dateConfirm(e){
		console.log(e[0],e[e.length-1])
	}
	//弹层名称
	const detailsModal = ref()
	
	//消息通知列表数据
	const listData=reactive([
		{
			title:'专项检查通知',
			createDate:'2024-01-10  12:36:12',
			starDate:'2024-01-12',
			endDate:'2024-01-25',
			content:'“校园安全检查”',
			unit:'长春市教育局',
			isRead:0
		},
		{
			title:'专项检查通知',
			createDate:'2024-01-10  12:36:12',
			starDate:'2024-01-12',
			endDate:'2024-01-25',
			content:'“校园安全检查”',
			unit:'长春市教育局',
			isRead:1
		},
	])
	
	//详情弹层数据
	const content = ref('长春市教育局将于2024-01-12~2024-01-25进行“校园安全检查”，检查内容“校园消防安全检查”，望知悉！长春市教育局将于2024-01-12~2024-01-25进行“校园安全检查”，检查内容“校园消防安全检查”，望知悉！长春市教育局将于2024-01-12~2024-01-25进行“校园安全检查”，检查内容“校园消防安全检查”，望知悉！长春市教育局将于2024-01-12~2024-01-25进行“校园安全检查”，检查内容“校园消防安全检查”，望知悉！')
	
	function openDetails() {
		detailsModal.value.open();
	}
</script>

<style scoped lang="scss">
	.slot-content{
		font-size: 32rpx;
		line-height: 48rpx;
		color: rgba(0, 0, 0, 0.4);
		max-height: 350rpx;
		overflow-y: auto;
	}
</style>